$mat-red: (
  50: #ffebee,
  100: #ffcdd2,
  200: #ef9a9a,
  300: #e57373,
  400: #ef5350,
  500: #ff6600,
  600: #e53935,
  700: #d32f2f,
  800: #c62828,
  900: #b71c1c,
  A100: #ff8a80,
  A200: #ff5252,
  A400: #ff1744,
  A700: #d50000,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: white,
    A700: white,
  )
);

$mat-blue: (
  50: #e3f2fd,
  100: #bbdefb,
  200: #90caf9,
  300: #64b5f6,
  400: #42a5f5,
  500: #4a99e6,
  600: #65a8ea,
  700: #1976d2,
  800: #1565c0,
  900: #0d47a1,
  A100: #82b1ff,
  A200: #448aff,
  A400: #2979ff,
  A700: #2962ff,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: white,
    A700: white,
  )
);

.col-md-12 {
	> .spacer {
		height: 1px;
		background-color: #000;
	}
}

$mat-yjbest: (
  50: #e3f2fd,
  100: #bbdefb,
  200: #90caf9,
  300: #64b5f6,
  400: #42a5f5,
  500: #eb6120,
  600: #ee7941,
  700: #1976d2,
  800: #1565c0,
  900: #0d47a1,
  A100: #82b1ff,
  A200: #448aff,
  A400: #2979ff,
  A700: #2962ff,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: white,
    A700: white,
  )
);

$mat-light-theme-background: (
  status-bar: map_get($mat-grey, 300),
  app-bar:    map_get($mat-grey, 100),
  background: map_get($mat-grey, 50),
  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
  card:       white,
  dialog:     white,
  disabled-button: $black-12-opacity,
  raised-button: #f5f5f5,
  focused-button: $black-6-opacity,
  selected-button: map_get($mat-grey, 300),
  selected-disabled-button: map_get($mat-grey, 400),
  disabled-button-toggle: map_get($mat-grey, 200),
  unselected-chip: map_get($mat-grey, 300),
  disabled-list-option: map_get($mat-grey, 200),
);

.xs-1 {
  	transform:scale(.5);
  	&.material-icons {
  		left: -4px;
    	position: relative;
    	margin-right: 12px;
	}
}
.xs-2 {
  transform:scale(.25)
}

.col-md-2 {
  &.col-md-25 {
    width:20%;
    flex:none;
    max-width: none;
  }
}

div.toggle {
    transition: height 0.4s ease;
    overflow: hidden;
}
a.toggle {
    cursor: pointer;
}

.mat-form-field-suffix {
	.mat-icon-button {
		.mat-icon {
			height: 1.143em;
			width: 1.143em;
		}
	}
}

md-calendar {

	thead.mat-calendar-table-header > tr:first-child {
		box-shadow: 0px 5px 10px -4px #ccc;
	}
	.mat-calendar-header {padding:0;}
	.mat-calendar-header .mat-calendar-controls {margin:0;}
	.mat-calendar-content {padding-left: 0;padding-right: 0;
		.mat-calendar-body-cell-content {
			
		}
		.mat-calendar-body-today:not(.mat-calendar-body-selected) {
			background-color: #eeeeee;
			border: 0;
			color: #333333;
		}
		:not(.mat-calendar-body-disabled):hover,
	  	.cdk-keyboard-focused .mat-calendar-body-active {
		    & > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
		      	background-color: map-get($mat-yjbest,500);
		      	color: white;
		    }
	  	}
	  	.mat-calendar-table-header-divider::after {display: none;}
	}
	.mat-calendar-content thead tr:first-child th {padding: 10px 0;background-color: #eeeeee;}
}

md-tab-group {
  padding: 0 30px;
  background-color: white;
  .mat-tab-header {
  }
  .box-body {
    padding: 0;
  }
}

.mod-table {
  ul,li {
    list-style-type: none;
  }
}

.mod-thead {
  width: 100%;display: block;margin:0;padding:0;
  li {
    float:left;width: 11%;border-right:1px solid #ccc;border-bottom:1px solid #ccc;list-style-type: none;    height: 30px;
  }
}
.mod-tbody {
  width: 100%;display: block;margin:0;padding:0;
  li {
    float:left;width: 11%;border-right:1px solid #ccc;border-bottom:1px solid #ccc;list-style-type: none;    height: 30px;white-space: nowrap;
  }
  app-project-node {width: 100%;}
}

dict-select {
   position: relative;
    

  .mat-select-trigger {
    font-size: 14px;
    height: 23px;
    .mat-select-placeholder {
      margin-top: -7px;
    }
  }
}

md-select {
   position: relative;
    top: -8px;
  margin-bottom: 20px;
  .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger {
    color: #999;
  }
  .mat-select-arrow {
      margin-bottom: 6px;
  }
  .mat-select-underline {
    background-color: #eeeeee;
  }
  .mat-select-value-text {
    margin-top: -7px;
  }
  .mat-select-trigger {
    font-size: 13px;
    height: 23px;
    .mat-select-placeholder {
      margin-top: -7px;
      .mat-select-value {
        top:-4px;
      }
    }
  }
}

.mat-tab-body-content {
  overflow: inherit!important;
}



label + zbj-rate {
  width: 70%; float: right;
  #pingStar {
    padding-left: 0;    display: flex;    justify-content: space-between;
  }
}

.mat-raised-button {
  box-shadow: none!important;
  border: 1px solid #eee!important;
  border-radius: 4px;
}

.mat-raised-button.mat-primary:hover {
  background-color: map-get($mat-yjbest,600);
  border-width: 1px;
  border-style: solid;
  border-color: map-get($mat-yjbest,600)!important;
}



.mat-raised-button.mat-warn:hover {
  background-color: map-get($mat-blue,600);
  border-width: 1px;
  border-style: solid;
  border-color: map-get($mat-blue,600)!important;
}

.mat-raised-button:hover {
  background-color: white;
  border-width: 1px;
  border-style: solid;
  border-color: map-get($mat-yjbest,500)!important;
}

[disabled].mat-raised-button:hover {
  border-width: 1px;
  border-style: solid;
  border-color: #eeeeee!important;
}

.box-title {font-size: 20px;margin-bottom: 80px;}

app-project-node {
  tr {border-bottom: 1px solid #eeeeee;
    &:first-child {
    	background-color: #f5f5f5;
    	border: 1px solid #eeeeee;
      height: 60px;
      	td {text-align: center;}
    }
  }
}

.mat-placeholder-required {
  color: map-get($mat-yjbest,500);
}



.box.box-body.stakeholder-list {
	padding: 0;
    margin: 0 -15px;
}

.mat-form-field-placeholder-wrapper {
	.mat-form-field-placeholder {
  		font-size: 13px;
  	}
} 

.custom-actions {
	text-align: center;
}

.mat-elevation-z2 {
    box-shadow: 0px 0px 10px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

span.file {
    display: block;
    padding: 8px 12px;
    background-color: #4a99e6;
    float: left;
    position: relative;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    margin: 15px 0;
    input {
	    opacity: 0;
	    position: absolute;
	    top: 0;
	    padding: 0;
	    left: 0;
	    bottom: 0;
    }
  }

.dialog-container1,
.dialog-container2 {
	.dialog-header {
		margin-bottom: 40px;
	}
	.dialog-body {
		.row {
			margin-top: 15px;
		}
	}
	.dialog-footer {
		margin-top: 40px;
		.mat-raised-button {
			margin-left: 20px;
			&:first-child {
				margin-left: 0;
			}
		}
	}
}  
.dialog-container2 {
	.dialog-header {
		padding: 0;
	}
	.dialog-body {
		margin: 0;
		.row {
			margin-top: 30px;
		}
	}
}

.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
	font-size: 13px;
}

a.toggle {color: #eb6120!important;}

app-template-node {
  table {
    tbody {
      tr {
        border-bottom: 1px solid #eeeeee!important;
        &:first-child {
          border: 1px solid #eeeeee!important;
          height: 60px;
        }
      }
    }
  }
}

.swal2-icon {
  .swal2-success {
    display: none;
  }
}
